<template>
    <div>
        <el-dialog :title="form.id > 0 ? '编辑' : '添加'" :visible.sync="info.isShow" @close="reset" fullscreen>

            <el-form ref="add" :model="form" :rules="rules">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基础信息" name="first">
                        <el-form-item label="一级分类" label-width="120px" prop="first_cateid">
                            <el-select @change="choose" v-model="form.first_cateid" placeholder="请选择">
                                <el-option v-for="item in catelist" :key="item.id" :label="item.catename"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="二级分类" label-width="120px" prop="second_cateid">
                            <el-select v-model="form.second_cateid" placeholder="请选择">
                                <el-option v-for="item in SecondArr" :key="item.id" :label="item.catename"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="商品名称" label-width="120px" prop="goodsname">
                            <el-input v-model="form.goodsname" autocomplete="off" placeholder="商品名称"></el-input>
                        </el-form-item>
                        <!-- 图片上传 -->
                        <el-form-item label="分类图片" :label-width="formLabelWidth" prop="img">
                            <el-upload action="#" list-type="picture-card" :auto-upload="false" ref="upload"
                                :on-change="change" :limit="1" :on-exceed="() => $message.error('文件只能上传一个哟')"
                                :file-list="fileList">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>

                        <el-form-item label="商品价格" label-width="120px" prop="price">
                            <el-input v-model="form.price" autocomplete="off" placeholder="商品价格"></el-input>
                        </el-form-item>

                        <el-form-item label="市场价格" label-width="120px" prop="market_price">
                            <el-input v-model="form.market_price" autocomplete="off" placeholder="市场价格"></el-input>
                        </el-form-item>

                        <el-form-item label="商品规格" label-width="120px" prop="specsid">
                            <el-select @change="guige" v-model="form.specsid" placeholder="请选择">
                                <el-option v-for="item in specslist" :key="item.id" :label="item.specsname"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="规格属性" label-width="120px" prop="specsattr">
                            <el-select v-model="form.specsattr" placeholder="请选择">
                                <el-option v-for="item in Attrs" :key="item" :label="item"
                                    :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item prop="isnew" label="是否新品" label-width="120px">

                            <el-tooltip class="item" effect="dark" :content="form.isnew == 1 ? '是' : '不是'"
                                placement="top">
                                <el-switch v-model="form.isnew" active-color="#13ce66" inactive-color="#ff4949"
                                    :active-value="1" :inactive-value="0">
                                </el-switch>
                            </el-tooltip>

                        </el-form-item>

                        <el-form-item prop="ishot" label="是否热卖" label-width="120px">

                            <el-tooltip class="item" effect="dark" :content="form.ishot == 1 ? '是' : '不是'"
                                placement="top">
                                <el-switch v-model="form.ishot" active-color="#13ce66" inactive-color="#ff4949"
                                    :active-value="1" :inactive-value="0">
                                </el-switch>
                            </el-tooltip>

                        </el-form-item>


                        <el-form-item label="菜单状态" label-width="120px" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio :label="3">正常</el-radio>
                                <el-radio :label="6">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>

                    </el-tab-pane>

                    <template>
                        <el-tab-pane label="商品介绍" name="second">
                            
                            <el-form-item prop="description" label="商品介绍">
                                <WangEditor ref="description" id="description" width="100%"
                                    v-model="form.description" />
                            </el-form-item>
                        </el-tab-pane>
                    </template>
                </el-tabs>
            </el-form>



            <div slot="footer" class="dialog-footer">
                <el-button @click="reset">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
// 引入
import { mapState, mapActions } from 'vuex';
import WangEditor from "vue-wangeditor";

export default {
    props: ["info"],
    computed: {
        ...mapState("goods", ["goodslist", "goodscount"]),
        ...mapState("cate", ["catelist"]),
        ...mapState('specs', ['specslist'])
    },
    components: {
        WangEditor
    },
    mounted() {
        // 调用
        this.getgoodslist({ page: this.page, size: this.size })
        this.getgoodscount();
        this.getcatelist();
        this.getspecslist()
    },
    data() {
        return {
            activeName: "first",
            form: {
                first_cateid: "",
                second_cateid: "",
                goodsname: "",
                price: "",
                market_price: "",
                img: "",
                description: "",
                specsid: "",
                specsattr: "",
                isnew: 0,
                ishot: 0,
                status: ""
            },
            rules: {
                first_cateid: {
                    required: true, message: "请选择一级分类编号", trigger: "blur"
                },
                second_cateid: {
                    required: true, message: "请选择二级分类编号", trigger: "blur"
                },
                goodsname: {
                    required: true, message: "请输入商品名称", trigger: "blur"
                },
                price: {
                    required: true, message: "请输入商品价格", trigger: "blur"
                },
                market_price: {
                    required: true, message: "请输入市场价格", trigger: "blur"
                },
                isnew: {
                    required: true, message: "请选择是否新品", trigger: "blur"
                },
                ishot: {
                    required: true, message: "请选择是否热卖推荐", trigger: "blur"
                },
                specsid: {
                    required: true, message: "请选择商品规格编号", trigger: "blur"
                },
                specsattr: {
                    required: true, message: "请输入商品规格属性", trigger: "blur"
                },
                status: {
                    required: true, message: "请选择状态", trigger: "blur"
                }
            },
            page: 1,
            size: 1,
            rules: {

            },
            formLabelWidth: '120px',
            fileList: [],
            dialogVisible: false,
            dialogImageUrl: '',
            SecondArr: [],//二级分类
            Attrs: []
        };
    },
    methods: {
        ...mapActions("goods", ["getgoodslist", "getgoodscount"]),
        ...mapActions("cate", ["getcatelist"]),
        ...mapActions('specs', ['getspecslist']),

        // 选择的是哪一个菜单
        choose(val) {
            const index = this.catelist.findIndex((item) => item.id === val);

            this.form.second_cateid = '';

            // 更新二级分类数组secondCateList
            if (this.catelist[index].children) {
                this.SecondArr = this.catelist[index].children;
            } else {
                // 清空上次选中的一级分类对应的二级分类列表
                this.SecondArr = [];
            }
        },
        reset() {
            this.form = {
                first_cateid: "",
                second_cateid: "",
                goodsname: "",
                price: "",
                market_price: "",
                img: "",
                description: "",
                specsid: "",
                specsattr: "",
                isnew: 0,
                ishot: 0,
                status: ""
            };
            this.info.isShow = false
            // 清除选择的图片
            this.$refs.upload.clearFiles();
        },
        submit() {
            this.$refs.add.validate(value => {
                if (value) {
                    // console.log(this.form);
                    this.$Api.goodsadd(this.form).then(res => {

                        console.log(res, 12123456645);
                        // 如果成功关闭dialog页面，重新渲染页面，提示信息
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            // 重新调用这个页面
                            this.getcatelist()
                            // 调用reset取消函数
                            this.reset()
                        }
                    })
                    // return
                } else {
                    console.log(11);
                }
            })
        },
        change(file) {
            // 用户选择头像的行为
            console.log(file.raw);
            this.form.img = file.raw
        },
        // 商品规格
        guige(id) {
            const index = this.specslist.findIndex((item) => item.id === id);

            this.form.specsattr = '';

            // 更新二级分类数组secondCateList
            if (this.specslist[index].attrs) {
                this.Attrs = this.specslist[index].attrs;
                console.log(id);
                console.log(this.Attrs);
            } else {
                // 清空上次选中的一级分类对应的二级分类列表
                this.Attrs = [];
            }
        },
        // 回显
        Echo(obj) {
            this.form = {
                ...obj,
                id: ''
            };
            this.First(obj.first_cateid)
            this.Second(obj.second_cateid)

        }
    },
};
</script>
  
<style  scoped>

</style>
  